<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <title></title>
    <include file="public@head" />
    <link rel="stylesheet" href="__TMPL__public/assets/css/star.css"/>

    <style>
        .comments_wra li {
            margin-bottom: 0;
        }
        .comments_wra li .user_input_wrap{
            /*margin-top: 14px;*/
            float: right;
        }
        .comments_wra li .user_input_wrap img{
            width: 34px;
            height: 34px;
            border-radius: 17px;
            margin-top: 2px;
        }
        .comments_wra li .user_input_wrap .user_input{
            outline: none;
            resize:none;
            box-shadow: none;
            text-decoration: none;
            word-wrap: break-word;
            padding: 10px 6px 0 10px;
            width: 580px;
            height: 28px;
            line-height: 16px;
            border: 1px solid #ccc;
            background: #f9f9f9;
            border-radius: 4px;
            overflow: auto;
        }
        .comments_wra li .new_comment{
            margin-bottom: 10px;
        }
        .comments_wra li .new_comment span.cancel_btn,.main_comment span.cancel_btn{
            color: #999;
            font-size: 16px;
            margin-top: 26px;
            cursor: pointer;

        }
        .comments_wra li .new_comment span.send_btn,.main_comment span.send_btn{
            width: 68px;
            height: 40px;
            line-height: 40px;
            color: #fff;
            text-align: center;
            background: #04dd98;
            margin: 14px 0 0 30px;
            font-size: 16px;
            border-radius: 5px;
            cursor: pointer;

        }
        .comments_wra li .comments_wra{
            clear: both;
        }

        .comments_wra li .comments_wra li img{
            width: 34px;
            height: 34px;
            border-radius: 17px;
            margin-right: 10px;
        }
        .main_comment{
            padding-bottom: 20px;
        }
        .comments_wra li .info .name{
            color: #333;
            font-size: 14px;
        }
        .comments_wra li .info .time{
            color: #ccc;
            font-size: 12px;
        }
        li.comment_list{
            padding: 20px 0 0 0;
            border-top: 1px solid #ebebeb;
        }
        .comments_wra li .auth_comment .comment{
            padding: 10px 0 6px 0;
            line-height: 20px;
            color: #666;
        }
        .comments_wra li .sub_comment_list .comment{
            padding: 10px 0 8px;
            line-height: 20px;
            color: #666;
        }
        .comments_wra li .auth_comment .comment,.auth_comment .sub_tool_group{
            padding-left: 44px;
        }
        .comments_wra li .sub_tool_group{
            margin-bottom: 14px;
        }
        .comments_wra li .sub_tool_group .reply_btn{
            color: #669966;
            cursor: pointer;
        }
        .comments_wra li .sub_comment_list{
            border-left: 1px solid #e8e8e8;
            margin-left: 44px;
            padding-left: 16px;
        }
        .comments_wra li .sub_comment .name{
            color: #80aa9d;
            margin-right: 14px;
        }
        .message_total{
            margin-bottom: 20px;
        }

    </style>
</head>
<body>
<include file="public@starnav" />

<div class="center-s">
    <p class="message_total"></p>
    <ul class="comments_wra">
        <li class="clearfix leave_list">
            <div class="auth_comment">
                <img class="fl auth_pic" src="http://avatar.kancloud.cn/0e/b52592bc13e5fa22465f5f3a14881a" alt="">
                <div class="info fl">
                    <p class="name">若璃23</p>
                    <p class="time">2017-06-09 15:47</p>
                </div>
                <p class="comment" style="clear:both">看看</p>
                <div class="sub_tool_group clearfix">
                    <span data-name="" data-cid="" data-c_udid="" data-c_parudid="" class="reply_btn fl">回复</span>
                </div>
            </div>
            <div class="sub_comment_list"><div class="sub_comment">
                <div class="info">
                    <span class="name">若璃23：回复若璃23</span>
                    <span class="time">2017-06-09 15:47</span>
                </div>
                <p class="comment">啦啦啦</p>
                <div class="sub_tool_group clearfix">
                    <span data-name="" data-cid="" data-c_udid="" data-c_parudid="" class="reply_btn fl">回复</span>
                </div>
            </div>
            </div>
            <!--评论input-->
            <div class="new_comment clearfix displayNone" style="display: block;">
                <div class="clearfix user_input_wrap">
                    <textarea placeholder="The Chemist，Chaz回复若璃23" name="" id="" class="user_input fr" cols="30" rows="10" data-c_udid="23" data-user_name="The Chemist，Chaz" data-reply_name="若璃23" data-parentid="32"></textarea>
                </div>
                <span class="fr send_btn">回复</span>
                <span class="fr cancel_btn">取消</span>
            </div>
        </li>
    </ul>
</div>


<include file="public@footer" />
<include file="public@starscripts" />
<script>
    $(function(){
        iService.headerMove(2);

        //点击回复时候的改变
        var reply_Fun = function(ele_cur){
            var new_comment = ele_cur.parents("li").children(".new_comment"),user_input = new_comment.find(".user_input");
            new_comment.slideDown("fast");
            iService.inputAnimate(user_input);
            var name = ele_cur.data("name"),c_parent = ele_cur.data("c_parent"),c_udid = ele_cur.data("c_udid");
            user_input.attr("placeholder","回复"+name);
            user_input.data({"c_parent":c_parent,"c_udid":c_udid,"name": name});
        };

        //回复留言消息
        var send_Fun = function(send_now){
            var user_input = send_now.parents(".new_comment").find(".user_input");
            var comList_param = {
                url:'Circles/comSend',
                data:{
                    cid: localStorage.udid,
                    description: user_input.val(),
                    parent: user_input.data("c_parent"),
                    pudid: user_input.data("c_udid"),
                    type: 30
                }
            };
            $.JsonRpc(comList_param,function(data){
                console.log(data);
                if(data.code==200){
                    data = data.data;
                    console.log(data);
                    var tpl =
                        '<div class="sub_comment">'+
                        '<div class="info">'+
                        '<span class="name">'+localStorage.u_nickname+'回复：'+user_input.data("name")+'</span>'+
                        '<span class="time">'+iService.timeFormat(data.comment.c_createtime)+'</span>'+
                        '</div>'+
                        '<p class="comment">'+data.comment.c_content+'</p>'+
                        '<div class="sub_tool_group clearfix">'+
                        '<span data-c_parent="'+data.comment.c_parent+'" data-c_udid="'+data.comment.c_udid+'" data-name="'+localStorage.u_nickname+'" class="reply_btn fl">回复</span>'+
                        '</div>'+
                        '</div>';
                    var sub_comment_list_now = send_now.parents(".comment_list").find(".sub_comment_list");
                    $(tpl).appendTo(sub_comment_list_now);

                    user_input.val("").stop().animate({"height":"28px"}, "fast");
                    send_now.parents(".new_comment").slideUp("fast");
                    $(".reply_btn").off("click").on("click",function(){
                        reply_Fun($(this));
                    });
                }
            });
        };

        var leave_param = {
            url:'Circles/comList',
            data:{
                cid: localStorage.udid,
                type: "30",
                page: 1
            }
        };

//        留言列表
        $.JsonRpc(leave_param,function(data){
            console.log(data);
            $(".message_total").html(data.data.num+"留言");
            if(data.data.list){
                data = data.data.list;
                var tpl = "";
                $.each(data,function(i){
                    tpl +=
                        '<li class="clearfix comment_list" >'+
                            '<div class="auth_comment">'+
                                '<img class="fl auth_pic" src="'+data[i].u_avatar+'" alt="">'+
                                    '<div class="info fl">'+
                                        '<p class="name">'+data[i].u_nickname+'</p>'+
                                        '<p class="time">'+iService.timeFormat(data[i].c_createtime)+'</p>'+
                                    '</div>'+
                                    '<p class="comment" style="clear:both">'+data[i].c_content+'</p>'+
                                    '<div class="sub_tool_group clearfix">'+
                                        '<span data-c_parent="'+data[i].cid+'" data-c_udid="'+data[i].c_udid+'" data-name="'+data[i].u_nickname+'" class="reply_btn fl">回复</span>'+
                                    '</div>'+
                            '</div>'+'<div class="sub_comment_list">';
                    if(data[i].children){
                        $.each(data[i].children,function(k) {
                            tpl +=
                                '<div class="sub_comment">'+
                                '<div class="info">'+
                                '<span class="name">'+data[i].children[k].cnickname+'回复：'+data[i].children[k].pnickname+'</span>'+
                                '<span class="time">'+iService.timeFormat(data[i].children[k].c_createtime)+'</span>'+
                                '</div>'+
                                '<p class="comment">'+data[i].children[k].c_content+'</p>'+
                                '<div class="sub_tool_group clearfix">'+
                                '<span data-c_parent="'+data[i].children[k].c_parent+'" data-c_udid="'+data[i].children[k].c_udid+'" data-name="'+data[i].children[k].cnickname+'" class="reply_btn fl">回复</span>'+
                                '</div>'+
                                '</div>';
                        });
                    }
                    tpl +=
                        '</div>'+
                        '<div class="new_comment clearfix displayNone" style="">'+
                            '<div class="clearfix user_input_wrap">'+
                                '<textarea placeholder="" name="" id="" class="user_input fr" cols="30" rows="10" data-c_udid="" data-user_name="" data-reply_name="" data-parentid="" style="height: 28px;"></textarea>'+
                            '</div>'+
                            '<span class="fr send_btn">回复</span>'+
                            '<span class="fr cancel_btn">取消</span>'+
                        '</div>'+
                        '</li>';
                });

                $(".comments_wra").html(tpl);
                $(".reply_btn").off("click").on("click",function(){
                    reply_Fun($(this));
                });
                $(".cancel_btn").on("click",function(){
                    var new_comment = $(this).parents(".new_comment");
                    new_comment.slideUp("fast");

                });
                $(".send_btn").on("click",function(){
                    var send_now = $(this);
                    send_Fun(send_now);
                });
            }
        })
    })
</script>
</body>
</html>



























